<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽</title>
    <script src="../js/vue@2.7.16.js"></script>
</head>

<body>


    <div id="app">
        <my-div>
            <div slot="top">这是头部的内容</div>
            <div slot="left">这是左侧的内容</div>
            <div slot="right">这是右侧的内容
                <my-component2></my-component2>
            </div>
        </my-div>
    </div>
    <template id="mydiv1">
        <div>
            <div style="background-color: aqua;height: 200px;">
                这是头部
                <slot name="top"></slot>
            </div>
            <div style="float: left;height: 500px;width: 20%;background-color: antiquewhite;">
                这是左侧
                <slot name="left"></slot>
            </div>
            <div style="float: left;height: 500px;width: 80%;background-color: cadetblue;">
                这是右侧
                <slot name="right"></slot>
            </div>
        </div>
    </template>
</body>
<script>
    Vue.component('my-div', {
        template: "#mydiv1",
        data: function () {
            return {
                content: ""
            }
        },
        props: ["content"]
    })

    Vue.component('my-component-name2', {
        template: "<div>全局组件2</div>",
    });

    var vm = new Vue({
        el: "#app",
    })
</script>

</html>